<template>
    <div>
        <el-dialog title="路由详情" :visible.sync="visible" width="45%" @close="handleClose">
            <VueJsonEditor v-model="routerDetail" 
                                    :showBtns="false" 
                                    mode="view" 
                                    lang="zh" 
                                    :expanded-on-start="true"></VueJsonEditor>
        </el-dialog>
    </div>
</template>

<script>
import VueJsonEditor from "vue-json-editor";
export default {
    name: 'RouterDetail',
    props: {
        visibleDetail: {
            type: Boolean,
            default: false
        },
        routerDetail: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            visible: this.visibleDetail
        }
    },
    watch: {
        visibleDetail() {
            this.visible = this.visibleDetail
        },
    },
    methods: {
        handleClose() {
            this.$emit('update:visibleDetail', false)
        }
    },
    components: {
        VueJsonEditor
    }
};
</script>

<style scoped>
.jsoneditor-vue {
    height: 500px;
}
</style>